<template>
    <div class="page">
      <div class="content">
        <div class="pageClose">
          <!-- <div class="print-top-left">存取酒汇总打印</div> -->
          <div  @click="router.back()">关闭</div>
        </div>
        <div class="pageForm">
          <div class="formTitle">存取酒汇总打印</div>
          <div class="fromTypeBox">
            <div>打印类型：</div>
            <div class="fromTypeItem" @click="ridioIndex = '1'">
              <div class="ridio" :class="{ridioT: ridioIndex == '1'}">
                <div></div>
              </div>
              <div>存酒汇总</div>
            </div>
            <div class="fromTypeItem" @click="ridioIndex = '2'">
              <div class="ridio" :class="{ridioT: ridioIndex == '2'}">
                <div></div>
              </div>
              <div>取酒汇总</div>
            </div>
          </div>

          <div class="dateBox">
            <div>时间选择：</div>
            <div class="datePicker">
              <el-date-picker v-model="operDate" type="datetimerange" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable style="width: 100%;background-color: #FAFAFA; padding: 20px;"/>
            </div>
          </div>

          <div class="btnS">
            <div class="cancel" @click="router.back()">取消</div>
            <div class="print" @click="Print()">打印</div>
          </div>
        </div>
      </div>
    </div>
</template>
  
<script setup>
  import Api from '@/api'
  import { dateBefore, formatDate, getWeekRange,transformWorkTime } from '@/utils/chenhao.js' 
  import useConfigStore from '@/store/config'
  const configStore = useConfigStore()
  const orgStartTime = configStore.shopInfo.orgReportStartTime // orgStartTime
  const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime 
  const router = useRouter()
  const operDate = ref('')
  const ridioIndex = ref('1')

  const onChangeDate = (params) => { 
    operDate.value = transformWorkTime(params,orgStartTime,orgEndTime)  
  } 
  onChangeDate('今天') 
  const Print = () => {
    if(ridioIndex.value == '1'){
      WineStoreTotalPrint()
    }else if(ridioIndex.value == '2'){
      WineTakeTotalPrint()
    }
  }
  const WineStoreTotalPrint = () => {
    Api.Common.PcObjProcess.Do({ functionName: "WineStoreTotalPrint", contentData: {StartDate: operDate.value[0],EndDate: operDate.value[1]} })
    .then(res => {
        console.log(res)
        ElNotification({title: '提示',message: "打印成功", type: 'success'});
    })
  }
  const WineTakeTotalPrint = () => {
    Api.Common.PcObjProcess.Do({ functionName: "WineTakeTotalPrint", contentData: {StartDate: operDate.value[0],EndDate: operDate.value[1]} })
    .then(res => {
        console.log(res)
        ElNotification({title: '提示',message: "打印成功", type: 'success'});
    })
  }
</script>
  
  <style scoped lang="scss">
  @import '@/styles/com_style_input.css';
    .page{
      min-height: 100vh;
      background-color: #F2F2F2;
      color: #212121;
    }
    .content{
      width: 80%;
      margin: auto;
      .pageClose{
        display: flex;
        align-items: center;
        justify-content: end;
        padding: 20px 0;
        div{
          width: 100px;
          text-align: center;
          background-color: #CCCCCC;
          font-size: 18px;
          padding: 12px 0;
          border-radius: 8px;
          cursor: pointer;
        }
      }
      .pageForm{
        width: 80%;
        min-height: 720px;
        margin: auto;
        background-color: #fff;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        .formTitle{
          font-size: 20px;
          font-weight: bold;
          padding-bottom: 20px;
          border-bottom: 1px solid #E6E6E6;
        }
        .fromTypeBox{
          display: flex;
          align-items: center;
          font-size: 16px;
          margin-top: 30px;
          .fromTypeItem{
            display: flex;
            align-items: center;
            margin-right: 50px;
            cursor: pointer;
            .ridio{
              width: 20px;
              height: 20px;
              margin-right: 10px;
              background: url('https://oss.jtmckj.com/pc/images/order/write_border.png') no-repeat;
              background-size: 100% 100%;
            }
            .ridioT{
              position: relative;
              border-color: #FF6A00;
              display: flex;
              align-items: center;
              justify-content: center;
              background: url('https://oss.jtmckj.com/pc/images/order/orge_avtive.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .dateBox{
          display: flex;
          align-items: center;
          font-size: 16px;
          margin-top: 30px;
          .datePicker{
            width: 400px;
          }
        }

        .btnS{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          position: absolute;
          bottom: 30px;
          right: 30px;
          div{
            font-size: 24px;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #FF6A00;
            margin-left: 35px;
            cursor: pointer;
          }
          .cancel{
            color: #FF6A00;
          }
          .print{
            background-color: #FF6A00;
            color: #fff;
          }
        }
      }

      .print-top-left{
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #212121;
                    line-height: 24px;
                }
    }
  </style>
  